import 'package:flutter/material.dart';
import '../../models/home_info_model.dart';
import '../../manger/cached_image_widget.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';

typedef LikeCallback = void Function(int subId);

class HomeLikeView extends StatelessWidget {
  final List<LikeListModel> likeList;
  final LikeCallback onLikeItemTap;

  const HomeLikeView({
    super.key,
    required this.likeList,
    required this.onLikeItemTap,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 15),
      padding: const EdgeInsets.only(top: 15),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 15),
                child: Text(
                  AppLocalizations.of(context)!.hotList,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              const SizedBox(width: 10),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Color(0xFFFF5643), Color(0xFFFCAF45)],
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.local_fire_department, size: 18, color: Colors.white),                    
                    Text(
                      AppLocalizations.of(context)!.tooManyGoods,
                      style: const TextStyle(
                        fontSize: 10,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
              const Spacer(),
              Padding(
                padding: const EdgeInsets.only(right: 15),
                child: Text(
                  AppLocalizations.of(context)!.discountMoreQuicklyBuy,
                  style: const TextStyle(
                    fontSize: 13,
                    color: Color(0xFF989898),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          SizedBox(
            height: 105,
            child: ListView.builder(
              padding: const EdgeInsets.only(left: 15,right: 15),
              scrollDirection: Axis.horizontal,
              itemCount: likeList.length,
              itemBuilder: (context, index) {
                final item = likeList[index];
                return GestureDetector(
                  onTap: () => onLikeItemTap(item.id),
                  child: Container(
                    margin: const EdgeInsets.only(right: 6),
                    width: 61,
                    child: Column(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(10), 
                          child: CachedImage(
                            width: 60,  // 固定宽度为 50
                            height: 60,  // 固定高度为 50
                            imageUrl: item.pic,
                            fit: BoxFit.cover,
                            placeholderPath: 'assets/images/placeholderImage.png',  // 占位符图片路径 
                          ),
                        ),
                        const SizedBox(height: 12),
                        Text(
                          item.name,
                          style: const TextStyle(
                            fontSize: 13,
                            color: Colors.black,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}